<template>
    <div class="sellsearch">
        <div class="header_search">
            <div @click="back()">
                <i class="iconfont icon-xiangzuojiantou"></i>
            </div>
            <div><input type="text" v-model="msg" :placeholder="sellsearch.hkeyone"></div>
            <div @click="sendParams(msg)">
                <span>搜索</span>
            </div>
        </div>
        <div class="history_search">
            <div class="history">
                <i class="iconfont icon-sousuo"></i>
                <span>历史搜索</span>
                <i class="iconfont icon-lajixiang" @click="clearData()"></i>
            </div>
            <div>
                <div v-for="(item , i) of key" :key="'kk'+i" class="history_data" @click="sendParams(item)">{{ item }}</div>
                <div v-if = "!key" class="no">暂无历史搜索</div>
                <div class="null"></div>
            </div>
        </div>
        <div class="hot_search">
            <div class="hot_text">
                <i class="iconfont icon-shoucang"></i>
                <span>热门搜索</span>
            </div>
            <div class="key">
                <div v-for="(item , i) of sellsearch.hkey" :key="'ss'+i" :style="'color:'+item.color">
                    <div @click="sendKey(item.query)">{{ item.query }}</div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
    data() {
        return {
            msg: "",
            key: "",
        };
    },
    computed: {
        ...mapState(["sellsearch"])
    },
    components: {},
    methods: {
        ...mapActions(["LoadKeyData"]),
        sendParams(data) {
            this.$router.push({
                name: "TypeContent",
                params: {
                    search: data,
                    msg:data
                }
            });
            if(localStorage['searchKey']){
               let storage = localStorage['searchKey']+"."+this.msg
               localStorage.setItem("searchKey", storage);
            }else{
               let storage =  this.msg
               localStorage.setItem("searchKey", storage);
            }
        },
        sendKey(data) {
            this.$router.push({
                name: "TypeContent",
                params: {
                    search: data,
                    msg: this.msg
                }
            });
        },
        clearData(){
            localStorage.removeItem("searchKey");
            this.key = null;
        },
        back(){
            this.$router.go(-1)
        }
    },
    mounted() {
        this.LoadKeyData();
        if(localStorage['searchKey']){
           this.key = localStorage['searchKey'].split(".") 
        }
    }
};
</script>

<style lang='less' scoped>
.sellsearch {
    .header_search {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        > div:first-child {
            width: 50px;
            text-align: end;
        }
        > div:nth-child(2) {
            width: 550px;
            input {
                width: 540px;
                height: 50px;
                border-radius: 6px;
                outline: none;
                border: 2px solid #ccc;
                font-size: 26px; /*px*/
                text-indent: 20px;
            }
            input:focus{    
                border-color:red; 
            }
        }
        > div:last-child {
            width: 80px;
        }
    }
    .history_search {
        width:100%;
        height: 180px;
        border-top: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
        display: flex;
        flex-flow: column;
        .history{
            width:100%;
            .icon-lajixiang{
                float: right;
                margin-right:20px;
            } 
            .icon-sousuo,span{
                float: left;
                margin-left:20px;
            }
        }
        > div {
            margin-top: 30px;
            width: 100%;
            text-align: center;
        }
        .history_data{
            float:left;
            margin-left:20px;
            border: 1px solid #ccc;
            border-radius:5px;
            padding-left:20px;
            padding-right:20px;
        }
        .null{
            clear:both;
        }
    }
    .hot_search {
        .hot_text {
            margin-left: 20px;
            margin-top: 20px;
        }
        .key {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            > div {
                margin-bottom: 10px;
                margin-top: 10px;
                width: 18%;
                height: 50px;
                text-align: center;
                position: relative;
                > div {
                    position: absolute;
                    left: 5px;
                    right: 5px;
                    top: 5px;
                    bottom: 5px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                }
            }
        }
    }
}
.no{
    float: left;
    margin-left:20px;
}
</style>
